<template>
	<view class="pageBox">
		<view class="topBox">
			<!-- 占位 -->
			<view :style="{height:occupySpace + 'px',position:'relative',zIndex:2}"></view>
			<!-- 导航栏背景 -->
			<view class="topBg" :style="{height: topBgHeight + 'px;'}"></view>
			<!-- 导航栏 -->
			<view class="topCon">
				<view class="topHead flex-between" :style="{top: statusBarHeight + 'px;'}">
					<image class="back" src="http://www.bobei.shop/static/back.png" @click="goBack"></image>
					<view class="title">
						订单详情
					</view>
				</view>
				<view class="textBox">

					<view class="status" v-if="info.status == 1">
						退款申请中
					</view>
					<view class="status" v-if="info.status == 2">
						退款驳回
					</view>
					<view class="status" v-if="info.status == 3">
						退款回填
					</view>
					<view class="status" v-if="info.status == 4">
						退款成功
					</view>
				</view>
			</view>
		</view>

		<view class="content">
			<!-- 退货退款 -->
			<view v-if="refundType == 1">
				<view class="addressBox" v-if="refundStatus == 3 || refundStatus == 4">
					<view class="address">
						<view class="addressTitle">
							退货地址：{{ address.refundName }} {{ address.refundMobile }}
						</view>
						<view class="addressText">
							{{ address.refundAddress }}
						</view>
					</view>
					<view class="description">
						退货说明：{{ address.refundRule }}
					</view>
				</view>
			</view>


			<view class="con">
				<view class="infoBox" v-if="info.goods">
					<view class="info flex" @click="goGoodsDetails(info.goods.id)">
						<image class="thumb" :src="info.goods.thumbUrl"></image>
						<view class="infoR">
							<view class="infoRT">
								{{info.goods.title}}
							</view>
							<view class="infoRB flex-between">
								<view class="price">
									¥{{info.price}}
								</view>
								<view class="sku">
									x {{info.num}}
								</view>
							</view>
						</view>
					</view>
					<view class="after">
						<view class="afterItem flex-between">
							<view class="afterItemLeft">
								退款原因：{{ info.refundReason }} {{ info.refundDesc }}
							</view>
						</view>

						<view class="afterItem flex-between">

							<view class="afterItemLeft">
								退款金额：¥{{ info.refundMoney }}
							</view>
						</view>

						<view class="afterItem flex-between">

							<view class="afterItemLeft">
								退款编号：{{ info.refundNo }}
							</view>
							<button class="copy" :plain="true" @click="onCopyBtn(info.refundNo)">复制</button>
						</view>

						<view class="afterItem flex-between">
							<view class="afterItemLeft">
								申请时间：{{ info.createdAt }}
							</view>
						</view>
					</view>
					<!-- 退款退货 -->
					<view v-if="refundType == 1 && (refundStatus == 3 && info.post)">
						<view class="after">
							<view class="afterItem flex-between">
								<view class="afterItemLeft">
									物流公司：{{ info.post }}
								</view>
							</view>

							<view class="afterItem flex-between">
								<view class="afterItemLeft">
									物流单号：{{ info.postNo }}
								</view>
							</view>
						</view>

						<view class="upload">
							<view class="uploadTitle">
								上传凭证
							</view>
							<view class="refundImgs flex">
								<view class="refundImgsItem flex-center" v-for="(item2,index2) in info.refundImgs"
									:key="index2">
									<image class="payImg" :src="item2" @click.stop="onImg(item2)"></image>
								</view>
							</view>
						</view>
					</view>

				</view>

				<!-- 仅退款 -->
				<view v-if="refundType == 0">
					<view class="refuse" v-if="refundStatus == 2 && applyDesc">
						拒绝原因：{{ applyDesc }}
					</view>
					<!-- <view class="call flex" v-if="refundStatus == 4 || refundStatus == 1">
						<view class="callItem flex-center" @click="onKeFu">
							<image class="choose" src="http://www.bobei.shop/static/afterSale/keFu.png">
								<view class="callItemText">
									联系客服
								</view>
						</view>
						<view class="callItem flex-center" @click="onCall">
							<image class="choose" src="http://www.bobei.shop/static/afterSale/dianHua.png">
								<view class="callItemText">
									拨打电话
								</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>

		<view class="bom flex-row" v-if="refundStatus == 3 && !info.post">
			<button class="btn2" :plain="true" @click="onBackfill">单号回填</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {},
				adress: {
					refundName: "",
					refundMobile: "",
					refundRule: "",
					refundAddress: "",
					post: "",
					postNo: "",
				},
				statusBarHeight: "",
				occupySpace: "",
				topBgHeight: "",
				refundType: "",
				refundStatus: "",
				applyDesc: "",
				info: {},
			}
		},
		onLoad(option) {
			let afterDetailsData = uni.getStorageSync('afterDetailsData');
			this.params = JSON.parse(afterDetailsData);
			this.getINfo();
		},
		onShow() {
			this.statusBarHeight = this.$mySysInfo().top
			this.occupySpace = this.$mySysInfo().top + 44;
			this.topBgHeight = this.$mySysInfo().top + 135;
		},
		methods: {
			goGoodsDetails(id) {
				uni.navigateTo({
					url: "/home/goodsDetails?id=" + id
				})
			},
			onImg(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			onBackfill() {
				uni.navigateTo({
					url: '/afterSale/backfill?id=' + this.info.orderId
				});
			},
			onCopyBtn(e) {
				// #ifdef H5
				this.$setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							duration: 1500,
							title: "复制成功",
							icon: "none"
						})
					}
				})
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: e,
					success: function() {
						uni.showToast({
							duration: 1500,
							title: "复制成功",
							icon: "none"
						})
					}
				});
				// #endif
			},
			getINfo() {
				// console.log(this.params)
				this.info = this.params;
				this.refundType = this.params.refundType;
				this.refundStatus = this.params.status;
				this.applyDesc = this.params.applyDesc;
				this.address = {
					refundName: this.params.refundName,
					refundMobile: this.params.refundMobile,
					refundRule: this.params.refundRule,
					refundAddress: this.params.refundAddress,
				}
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			onKeFu() {
				// console.log("客服");
				// uni.navigateTo({
				// 	url: '/pages/home/webview?url=' + encodeURIComponent(this.info.kefu)
				// })
			},
			onCall() {
				// console.log("拨打电话");
				// uni.makePhoneCall({
				// 	phoneNumber: '114' //仅为示例
				// });
			},
		},
	}
</script>

<style lang="scss" scoped>
	.pageBox {
		width: 100%;
		min-height: 100vh;
		background-color: #f9f9f9;
		padding-bottom: 200rpx;

		.topBox {
			position: relative;
			width: 100%;

			.topBg {
				width: 100%;
				background: #F2615F;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}

			.topCon {
				background: #F2615F;
				position: relative;
				z-index: 2;
				width: 100%;
				height: 180rpx;

				.topHead {
					background: #F2615F;
					height: 88rpx;
					width: 100%;
					padding: 0 32rpx;
					position: fixed;
					top: 0;
					left: 0;
					z-index: 2;

					.back {
						width: 36rpx;
						height: 36rpx;
					}

					.title {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #ffffff;
						position: absolute;
						top: 22rpx;
						left: 50%;
						transform: translate(-50%, 0);
					}
				}

				.textBox {
					.status {
						font-size: 32rpx;
						font-family: PingFangSC-Regular;
						line-height: 36rpx;
						color: #ffffff;
						padding: 50rpx 0 0 32rpx;
					}
				}
			}

		}

		.content {
			padding: 30rpx 30rpx 0;

			.addressBox {
				background-color: #ffffff;
				border-radius: 16rpx;
				margin-bottom: 32rpx;
				padding: 32rpx;

				.address {
					padding-bottom: 20rpx;

					.addressTitle {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1F0F26;
					}

					.addressText {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #1F0F26;
						padding-left: 142rpx;
					}
				}

				.description {
					padding-top: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #1F0F26;
					border-top: 2rpx solid #EBEDF0;
				}
			}

			.con {
				.infoBox {

					.info {
						background-color: #ffffff;
						border-radius: 16rpx;
						margin-bottom: 32rpx;
						padding: 32rpx;

						.thumb {
							width: 160rpx;
							height: 160rpx;
							border-radius: 16rpx;
						}

						.infoR {
							flex: 1;
							padding-left: 10rpx;
						}

						.infoRT {
							width: 100%;
							word-break: break-all;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							/* 这里是超出几行省略 */
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
							line-height: 44rpx;
						}

						.infoRB {
							margin-top: 20rpx;

							.price {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #000000;
								line-height: 48rpx;
							}

							.sku {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #afa9b0;
								line-height: 48rpx;
							}
						}
					}


					.after {
						background-color: #ffffff;
						border-radius: 16rpx;
						margin-bottom: 32rpx;
						padding: 32rpx;

						.afterItem {
							margin-bottom: 30rpx;

							.afterItemLeft {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
								flex: 1;
								word-break: break-all;
							}

							.copy {
								font-size: 28rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #B6273B;
								border: none;
								margin: 0;
								padding: 0;
							}
						}

						.afterItem:nth-last-of-type(1) {
							margin-bottom: 0;
						}

					}

					.upload {
						padding: 32rpx;
						background: #ffffff;
						border-radius: 16rpx;
						margin-bottom: 32rpx;

						.uploadTitle {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-bottom: 32rpx;
						}

						.refundImgs {
							flex-wrap: wrap;

							.refundImgsItem {
								width: 33.33%;

								.payImg {
									width: 188rpx;
									height: 126rpx;
								}
							}
						}

					}


				}



				.refuse {
					padding: 32rpx;
					background: #ffffff;
					border-radius: 16rpx;
					margin-bottom: 32rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular;
					line-height: 40rpx;
					color: #666666;
					word-break: break-all;
				}

				.call {
					width: 686rpx;
					height: 108rpx;
					background: #ffffff;
					border-radius: 16rpx;
					margin-bottom: 32rpx;

					.callItem {
						flex: 1;

						.choose {
							width: 32rpx;
							height: 32rpx;
						}

						.callItemText {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
						}

					}
				}
			}
		}

		.bom {
			width: 100%;
			height: 120rpx;
			justify-content: flex-end;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;
			background-color: #ffffff;
			padding: 0 32rpx;

			button {
				padding: 0;
				margin: 0 0 0 40rpx;
				font-size: 28rpx;
				width: 176rpx;
				height: 64rpx;
				border-radius: 52rpx;
			}

			.btn {
				color: #F2615F;
				border: 2rpx solid #F2615F;
			}

			.btn2 {
				color: #ffffff;
				border: none;
				background: #F2615F;
			}
		}
	}
</style>
